<template>
  <div class="category_list">
    <van-row justify="space-between">
      <van-col span="6" v-for="item in props.categoryList" :key="item.name">
        <div class="cat_list_item">
          <img :src="item.imgUrl" />
          <div>{{ item.name }}</div>
        </div></van-col
      >
    </van-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';
interface CatType {
  name: string;
  imgUrl: string;
}
interface Props {
  categoryList: object;
  num: number;
}
export default defineComponent({
  components: {},

  props: {
    num: {
      type: Number,
      default: 0,
    },
    categoryList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  setup(props: Props) {
    // 不要尝试去解构props，因为这样会让props失去响应式
    props = reactive(toRefs(props));
    return { props };
  },
});
</script>
<style lang="scss" scoped>
.category_list {
  text-align: center;
  margin-bottom: 20px;
}
.cat_list_item {
  margin-top: 10px;
  img {
    width: 46px;
    height: 46px;
  }
}
</style>
